@import 'media_queries.styl'

form.flex 
  display block
  flex-flow row wrap
  flex 1 1 100%
  margin 2em
  max-width 100%
  width 100%
    
  & > label, legend,.form-ctrls,.form-help
    display block
    width 100%
  
  .form-row, fieldset
    display block
    margin 0 0 1em 0 

  .form-ctrls
    input:not([type='checkbox']), select, textarea
      box-sizing border-box 
      max-width 100%
      width 100%
    
  
   .inline
     width auto !important

  .form-help
    font-size .75em
    
    
@media $media_medium
  form.flex
    display flex
    flex-flow column nowrap
    
    .form-row,fieldset
      margin 0
      display flex
      flex-flow row wrap  
      justify-content center
      position relative
      align-items stretch    
      
      & > label, legend
        flex 1
        margin 0 
        padding 0
        align-self flex-start
        

      .form-ctrls
        display flex
        flex-flow row wrap
        justify-content space-around
        flex 3
        margin 0
        align-self flex-start
        padding-bottom 2em
        input:not([type='checkbox']),select,textarea
          margin 0
      
      .form-help
        flex 1
        display flex
        flex-flow column nowrap
        margin-left 2em
        min-height 100%
        padding  .5em 1em 2em 1em
        align-items stretch
        background $bg-odd
     
      

          
        
